<template>
	<view class="container">
		<view class="topFixed">
			<view class="topNav">
				<view class="topNav-min d-rn d-jb d-ac">
					<image src="../../static/img/head.png" mode="">
					</image>
				</view>
			</view>
		</view>
		<view class="tips d-rn d-ac d-jb">
			<text></text>
			<text class="d-rn d-ac d-jc" @click="handleChangeLang">{{lanSts?'简':'繁'}}</text>
		</view>
		<view class="logo d-rn d-ac d-jc">
			<image src="../../static/img/logo.png" mode=""></image>
		</view>
		<view class="form">
			<!-- 账密 -->
			<view class="form-user" v-if="!loginWay">
				<view class="form-user-one d-rn d-ac">
					<image src="../../static/img/user.png" mode=""></image>
					<input type="text" placeholder="请输入用户名" placeholder-style="color:#CCD0D4;"
						v-model="zmcode.username">
				</view>
				<view class="form-user-one d-rn d-ac">
					<image src="../../static/img/pwd.png" mode=""></image>
					<input type="password" placeholder="请输入密码" placeholder-style="color:#CCD0D4;"
						v-model="zmcode.password">
				</view>
			</view>
			<!-- 邮箱 -->
			<view class="form-user" v-if="loginWay == 1">
				<view class="form-user-two d-rn d-ac">
					<image src="../../static/img/email.png" mode=""></image>
					<input type="text" placeholder="请输入邮箱" placeholder-style="color:#CCD0D4;" v-model="zmcode.username">
				</view>
				<view class="form-user-two d-rn d-ac">
					<image src="../../static/img/pwd.png" mode=""></image>
					<input type="text" placeholder="请输入验证码" placeholder-style="color:#CCD0D4;" v-model="zmcode.code">
					<text class="code" v-if="interval.show_again==0" @click="sendCode(0)">发送验证码</text>
					<text class="code" v-if="interval.show_again==1">{{interval.count}}后重试</text>
				</view>
			</view>
			<!-- 手机号 -->
			<view class="form-user" v-if="loginWay == 2">
				<view class="form-user-three d-rn d-ac">
					<image src="../../static/img/phone.png" mode=""></image>
					<!-- <text style="font-size: 30rpx;color: #999999;">+86</text> -->
					
					<picker @change="bindPickerChange" :range="phoneTypeList" range-key="name" class="picker">
						<view  style="font-size: 30rpx;color: #999999;">{{zmcode.areaCode}}</view>
					</picker>
					
					<image src="../../static/img/select.png" mode=""
						style="width: 12rpx;height: 7rpx;margin-top: 8rpx;margin-left: 10rpx;"></image>
					<text style="color: #E7E7E7;margin-right: 10rpx;">|</text>
					<input type="number" placeholder="请输入手机号" placeholder-style="color:#CCD0D4;"
						v-model="zmcode.username">
				</view>
				<view class="form-user-three d-rn d-ac">
					<image src="../../static/img/pwd.png" mode=""></image>
					<input type="text" placeholder="请输入验证码" placeholder-style="color:#CCD0D4;" v-model="zmcode.code">
					<text class="code" v-if="interval.show_again==0" @click="sendCode(1)">发送验证码</text>
					<text class="code" v-if="interval.show_again==1">{{interval.count}}后重试</text>
				</view>
			</view>

			<view class="form-option d-rn d-ac d-jb">
				<view class="form-option-left d-rn d-ac" @click="handleLoginFree">
					<image :src="!confirmSts?'../../static/img/notConfirm.png':'../../static/img/comfirm.png'" mode="">
					</image>
					<text>7天免登录</text>
				</view>
				<view class="form-option-right" @click="handleForgetPwd">
					<text>忘记密码</text>
				</view>
			</view>
			<view class="form-btn d-rn d-ac d-jc" @click="handleLogin">
				<text class="d-rn d-ac d-jc">登 录</text>
			</view>
			<view class="form-three d-rn d-ac d-jb">
				<text @click="handleChangeWay">{{!loginWays?'邮箱验证码登录':loginWays==1?'手机验证码登录':'密码登录'}}</text>
				<text>|</text>
				<text @click="handleChangeWays">{{!loginWaya?'手机验证码登录':loginWaya==1?'密码登录':'邮箱验证码登录'}}</text>
			</view>
		</view>
		<view class="footer">
			<image src="../../static/img/head.png" mode=""></image>
		</view>

	</view>
</template>

<script>
	var _self
	import {
		login,
		validateCode,
		youvalidateCode,
		h5Login,
		personalCenter
	} from '../../api/index.js'
	export default {
		data() {
			return {
				// 手机信息
				phoneInfo: uni.getSystemInfoSync(),
				topTitBox: 0,
				lanSts: false,
				confirmSts: false,
				loginWay: 0, //0，账密  1，邮箱  2，手机号
				loginWays: 0,
				loginWaya: 0,
				interval: {
					show_again: 0, //  显示发送验证码||请稍后按钮
					count: "", // 等待时间
					timer: null, //定时器
				},

				zmcode: {
					username: '',
					code: '',
					type: '',
					password:'',
					areaCode:''
				},
				phoneTypeList:[
					{
						name:'86',
					},
					{
						name:'852',
					}
				],
				
			}
		},
		onLoad() {
			_self = this
			_self.topTitBox = _self.phoneInfo
			_self.zmcode.areaCode = _self.phoneTypeList[0].name
		},
		methods: {
			bindPickerChange(e) {
				_self.zmcode.areaCode = _self.phoneTypeList[e.detail.value].name
			},

			getTime() {
				const count = 60;
				if (!_self.timer) {
					_self.interval.count = count;
					_self.interval.show_again = 1;
					_self.interval.timer = setInterval(() => {
						if (_self.interval.count > 0 && _self.interval.count <= count) {
							_self.interval.count--;
							if (_self.interval.count < 10) {
								_self.interval.count = '0' + _self.interval.count
							}
							if (_self.interval.count == 0) {
								_self.interval.count = 0
							}
						} else {
							_self.interval.show_again = 0;
							clearInterval(_self.interval.timer);
							_self.interval.timer = null;
						}
					}, 1000)
				}
			},

			sendCode(sign) {
				if (sign) {
					if (_self.zmcode.username) {
						// if (_self.$commonFun.verPhoneCode(_self.zmcode.username)) {
							validateCode(this.zmcode).then(res => {
								if (res.code == 200) {
									_self.getTime()
								}
							})
						// } else {
						// 	_self.$commonFun.showTips('请输入正确手机号')
						// }

					} else {
						_self.$commonFun.showTips('请输入手机号')
					}
				} else {
					if (_self.zmcode.username) {
						if (_self.$commonFun.checkEmail(_self.zmcode.username)) {
							youvalidateCode(this.zmcode).then(res => {
								if (res.code == 200) {
									_self.getTime()
								}
							})
						} else {
							_self.$commonFun.showTips('请输入正确邮箱')
						}

					} else {
						_self.$commonFun.showTips('请输入邮箱')
					}
				}
			},
			handleChangeLang() {
				_self.lanSts = !_self.lanSts
			},
			handleLoginFree() {
				_self.confirmSts = !_self.confirmSts
			},
			handleRefashCode() {
				console.log('dianji');
			},
			handleLogin() {
				// _self.$commonFun.goUrl(3, '../index/index')
				// login(_self.zmcode).then(res => {
				// 	if (res.code == 200) {
				// 		uni.setStorageSync('AUTHORIZATION', res.token)
				// 		uni.setStorageSync('loginInfo', JSON.stringify(res))
				// 		_self.$commonFun.goUrl(3, '../index/index')
				// 	}
				// })

				if (_self.loginWay == 1) {
					// 邮箱登录
					_self.zmcode.type = 2
					h5Login(_self.zmcode).then(res => {
						uni.setStorageSync('AUTHORIZATION', res.token)
						personalCenter().then(aes=>{
							uni.setStorageSync('empName', aes.data.empName)
							uni.setStorageSync('empPhone', aes.data.empPhone)
							uni.setStorageSync('empCode', aes.data.empCode)
							uni.setStorageSync('deptName', aes.data.deptName)
							uni.setStorageSync('jobTitle', aes.data.jobTitle)
							uni.setStorageSync('empic', aes.data.headPortrait)
							uni.setStorageSync('roleName', aes.data.roleName)
							
							uni.setStorageSync('empId', aes.data.id)
							_self.$commonFun.goUrl(3, '../index/index')
						})
						
					})
				}
				if(!_self.loginWay){
					_self.zmcode.type = 0
					h5Login(_self.zmcode).then(res => {
						uni.setStorageSync('AUTHORIZATION', res.token)
						personalCenter().then(aes=>{
							uni.setStorageSync('empName', aes.data.empName)
							uni.setStorageSync('empPhone', aes.data.empPhone)
							uni.setStorageSync('empCode', aes.data.empCode)
							uni.setStorageSync('deptName', aes.data.deptName)
							uni.setStorageSync('jobTitle', aes.data.jobTitle)
							uni.setStorageSync('empId', aes.data.id)
							uni.setStorageSync('empic', aes.data.headPortrait)
							uni.setStorageSync('roleName', aes.data.roleName)
							_self.$commonFun.goUrl(3, '../index/index')
						})
						
					})
				}
				if(_self.loginWay==2){
					_self.zmcode.type = 1
					h5Login(_self.zmcode).then(res => {
						uni.setStorageSync('AUTHORIZATION', res.token)
						personalCenter().then(aes=>{
							uni.setStorageSync('empName', aes.data.empName)
							uni.setStorageSync('empPhone', aes.data.empPhone)
							uni.setStorageSync('empCode', aes.data.empCode)
							uni.setStorageSync('deptName', aes.data.deptName)
							uni.setStorageSync('jobTitle', aes.data.jobTitle)
							uni.setStorageSync('empId', aes.data.id)
							uni.setStorageSync('empic', aes.data.headPortrait)
							uni.setStorageSync('roleName', aes.data.roleName)
							_self.$commonFun.goUrl(3, '../index/index')
						})
						
					})
				}
			},
			handleChangeWay() {
				_self.interval.show_again = 0
				if (!_self.loginWays) {
					_self.loginWays = 1
					_self.loginWay = 1
					_self.loginWaya = 1
				} else if (_self.loginWays == 1) {
					_self.loginWays = 2
					_self.loginWay = 2
					_self.loginWaya = 2
				} else {
					_self.loginWays = 0
					_self.loginWay = 0
					_self.loginWaya = 0
				}
			},
			handleChangeWays() {
				_self.interval.show_again = 0
				if (!_self.loginWaya) {
					_self.loginWaya = 2
					_self.loginWay = 2
					_self.loginWays = 2
				} else if (_self.loginWaya == 1) {
					_self.loginWaya = 2
					_self.loginWay = 0
					_self.loginWays = 1
				} else {
					_self.loginWaya = 0
					_self.loginWay = 1
					_self.loginWays = 2
				}
			},
			handleForgetPwd() {
				_self.$commonFun.goUrl(1, '../forgetPwd/index')
			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;

		.topFixed {
			width: 100%;
			position: fixed;
			z-index: 60;
			top: 0;
			left: 0;
			background-color: #FFFFFF;
		}

		// 导航栏
		.topNav {
			width: 100%;
			box-shadow: 0px 0px 4rpx 0px rgba(0, 0, 0, 0.3);
			box-sizing: border-box;
			position: relative;

			&-min {
				width: 100%;
				position: absolute;
				left: 0;

				image {
					width: 100%;
					height: 154rpx;
					box-sizing: border-box;
				}

				text {
					display: block;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.tips {
			padding: 0 44rpx;
			box-sizing: border-box;
			margin-top: 168rpx;

			text:nth-of-type(2) {
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
				background-color: #FDC41F;
				font-size: 28rpx;
				font-family: TENGXZTB;
				color: #17171a;
			}
		}

		.logo {
			margin: 90rpx 0 70rpx 0;

			image {
				width: 406rpx;
				height: 136rpx;

			}
		}

		.form {
			width: 80%;
			margin: 0 auto;

			&-user {
				&-one {
					border-radius: 2em;
					background-color: #F6F6F6;
					padding: 30rpx 60rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

					input {
						font-size: 30rpx;
						color: #ccd0d4;
						flex: 1;
					}
				}

				&-two {
					border-radius: 2em;
					background-color: #F6F6F6;
					padding: 30rpx 60rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

					input {
						font-size: 30rpx;
						color: #ccd0d4;
						flex: 1;
					}

					image:nth-of-type(2) {
						width: 138rpx;
						height: 56rpx;
					}

					.code {
						color: #FDB911;
						font-size: 30rpx;
					}
				}

				&-three {
					border-radius: 2em;
					background-color: #F6F6F6;
					padding: 30rpx 60rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

					input {
						font-size: 30rpx;
						color: #ccd0d4;
						flex: 1;
					}

					image:nth-of-type(2) {
						width: 138rpx;
						height: 56rpx;
					}

					.code {
						color: #FDB911;
						font-size: 30rpx;
					}
				}
			}

			&-option {
				margin: 30rpx 0;

				&-left {
					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 16rpx;
					}

					text {
						font-size: 30rpx;
						color: #999999;
					}
				}

				&-right {
					text {
						font-size: 30rpx;
						text-decoration: underline;
						color: #666666;
					}
				}
			}

			&-btn {
				text {
					width: 100%;
					height: 90rpx;
					background: #FFDB33;
					border-radius: 2em;
					font-size: 36rpx;
				}
			}

			&-three {
				margin-top: 48rpx;

				text {
					font-size: 30rpx;
					text-decoration: underline;
					color: #666666;
				}

				text:nth-of-type(2) {
					color: #999999;
				}
			}

		}

		.footer {
			width: 100%;
			height: 90rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			image {
				width: 100%;
				height: 90rpx;
				transform: rotateX(180deg);
			}
		}

	}
</style>